<template>
  <view class="face-drawer">
    <scroll-view
      class="face-drawer__types"
      scroll-x
    >
      <view
        v-for="(item,index) in packages"
        :key="index"
        class="face-drawer__types-item"
        :class="{
          active: currentPackage === index
        }"
      >
        <image
          class="face-drawer__types-item-image"
          :src="item.icon"
        ></image>
      </view>
    </scroll-view>
    <scroll-view
      class="face-drawer__scroll"
      scroll-y
    >
      <view class="face-drawer-scroll-ctx">
        <view
          v-for="(item,index) in faceList"
          :key="index"
          class="face-drawer__scroll-item"
          @click="$emit('emoji', item)"
        >
          <view
            class="face-drawer__scroll-item-image"
          >{{item}}</view>
        </view>
        <view
          class="face-drawer__scroll-item-holder"
        ></view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    data () {
      return {
        currentPackage: 0,
        packages: [
          { icon: '../static/icon_btn_face.png', emoji: true, tip: false }
        ],
        faceList: ["😷","😶","😵","😴","😳","😲","😱","😰","😯","😮","😭","😬","😫","😪","😩","😨","😧","😦","😥","😤","😣","😢","😡","😠","😟","😞","😝","😜","😛","😚","😙","😘","😗","😖","😕","😔","😓","😒","😑","😐","😏","😎","😍","😌","😋","😊","😉","😈","😇","😆","😅","😄","😃","😂","😁","😀","🥉","🥈","🥇","🥅","🥄","🥃","🥂","🥁","🥀","🤾","🤽","🤼","🤺","🤹","🤸","🤷","🤶","🤵","🤴","🤳","🤰","🤧","🤦","🤥","🤤","🤣","🤢","🤡","🤠","🤞","🤝","🤜","🤛","🤚","🤙","🤘","🤗","🤖","🤕","🤔","🤓","🤒","🤑","🤐"],
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../common";
  .face-drawer {
    .face-drawer__types {
      height: 65px;
      .face-drawer__types-item {
        @extend .d-flex;
        width: 44px;
        height: 44px;
        margin-top: 10px;
        border-radius: $br-radius;
        &:nth-child(1) { margin-left: 10px; }
        &:nth-last-child(1) { margin-right: 15px; }
        &.active {
          background-color: #fff;
        }
        .face-drawer__types-item-image {
          width: 22px;
          height: 22px;
        }
      }
    }
    .face-drawer__scroll {
      @extend .flex;
      height: 268.5px;
      background-color: #EFEFEF;
      border-top: 1px solid $br-solid-color;
      .face-drawer-scroll-ctx {
        @extend .flex;
        flex-wrap: wrap;
        padding: 15px 0;
        .face-drawer__scroll-item {
          @extend .flex;
          @extend .flex-shrink;
          width: 93.75rpx;
          height: 93.75rpx;
          font-size: 56rpx;
        }
        .face-drawer__scroll-item-holder {
          @extend .flex-grow;
          width: auto;
          height: 40px;
        }
      }
    }
  }
</style>
